<template>
    <div>
        <div>
            <div class="zg_jpkc">
                <div class="zg_jpkbt">
                    <a :href="listURL(0)" target="_blank" class="zg_jpbta">更多</a>
                    <ul class="zg_jpnav">

                        <li class="zg_jpn11">{{subjctTypes.category_id}}</li>
                        <li v-for="(iteValue,iteKey) in subjctTypes.subject_id">
                            <a :href= "listURL(iteKey)"    target="_blank" @mouseover="on(subjctTypes.code,iteKey)">{{iteValue}}</a>
                        </li>
                    </ul>
                </div>
                <div class="zg_jpbox">
                    <ul class="zg_jpkcu" style="display: block;">
                        <div v-for="subCate in Category">
                            <li :style=subCate.style>
                                <div class="zg_jpkclt">
                                    <a :href="classURL(subCate.id)">
                                      <!--  <a :href="classURL(item.id)" :title="item.title"
                                           target="_blank">{{item.title}}</a>-->


                                        <img :src="subCate.image"
                                             title="IT培训课程-IT培训在线课程-培训-视频-教程-优就业" alt="IT培训课程-IT培训在线课程-培训-视频-教程-优就业">
                                    </a>
                                </div>
                                <h6>
                                    <a href="/class-165633/">
                                        {{subCate.title}} </a>
                                </h6>
                                <p>
                                    <span>{{subCate.countHour}}课时</span>
                                    <font><i>￥</i>{{subCate.price}}</font>
                                </p>
                            </li>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: "ClassCategories",
        props: {
            Category: '', subjctTypes: ''
        },
        methods: {
            classURL(id) {
                return '/class-' + id
            },
            listURL(id) {
                return '/list-' + id
            },
            on(event1, event2) {

                for (var i in this.Category) {
                    // console.log(i);
                    // console.log(this.Category[i].style);
                    this.Category[i].style = "display: none;"
                    if (event2 == this.Category[i].categoryId && event1 == 3) {
                        console.log(this.Category[i]);
                        this.Category[i].style = "display: block;"
                    }
                    if (event2 == this.Category[i].categoryId && event1 == 3) {
                        this.Category[i].style = "display: block;"
                    }
                    if (event2 == this.Category[i].categoryId && event1 == 3) {
                        this.Category[i].style = "display: block;"
                    }
                    if (event2 == this.Category[i].categoryId && event1 == 3) {
                        this.Category[i].style = "display: block;"
                    }
                    if (event2 == this.Category[i].categoryId && event1 == 3) {
                        this.Category[i].style = "display: block;"
                    }

                    if (event2 == this.Category[i].categoryId && event1 == 2) {
                        this.Category[i].style = "display: block;"
                    }
                    if (event2 == this.Category[i].categoryId && event1 == 2) {
                        this.Category[i].style = "display: block;"
                    }
                    if (event2 == this.Category[i].categoryId && event1 == 2) {
                        this.Category[i].style = "display: block;"
                    }
                    if (event2 == this.Category[i].categoryId && event1 == 2) {
                        this.Category[i].style = "display: block;"
                    }


                    if (event2 == this.Category[i].categoryId && event1 == 1) {
                        this.Category[i].style = "display: block;"
                    }
                    if (event2 == this.Category[i].categoryId && event1 == 1) {
                        this.Category[i].style = "display: block;"
                    }
                    if (event2 == this.Category[i].categoryId && event1 == 1) {
                        this.Category[i].style = "display: block;"
                    }
                    if (event2 == this.Category[i].categoryId && event1 == 1) {
                        this.Category[i].style = "display: block;"
                    }
                    console.log("this.Category:", event1, event2)
                    /*  for (var i in this.Category) {
                          console.log(i);
                          // console.log(this.Category[i].style);
                          this.Category[i+1].style = "display: none;"
                          if (event == "1互联网营销" && this.Category[i].categoryId == 1) {
                              this.Category[i].style = "display: block;"
                          }
                          if (event == "2设计" && this.Category[i].categoryId == 2) {
                              this.Category[i].style = "display: block;"
                          }
                          if (event == "3Web前端" && this.Category[i].categoryId == 3) {
                              this.Category[i].style = "display: block;"
                          }
                          if (event == "4程序开发" && this.Category[i].categoryId == 4) {
                              this.Category[i].style = "display: block;"
                          }
                          if (event == "6Office" && this.Category[i].categoryId == 6) {
                              this.Category[i].style = "display: block;"
                          }


                          for (var i in this.Category) {
                              console.log(this.Category[i].style);
                              this.costCategory[i].style = "display: none;"
                              if (event == "1互联网营销" && this.costCategory[i].categoryId == 1) {
                                  this.costCategory[i].style = "display: block;"
                              }
                              if (event == "1019Java" && this.costCategory[i].subjectId == 1019) {
                                  this.costCategory[i].style = "display: block;"
                              }
                              if (event == "1023大数据开发" && this.costCategory[i].subjectId == 1023) {
                                  this.costCategory[i].style = "display: block;"
                              }
                              if (event == "1020软件测试" && this.costCategory[i].subjectId == 1020) {
                                  this.costCategory[i].style = "display: block;"
                              }*/

                    // }
                }
            }
        },

    }
</script>

<style scoped>

</style>
